<template>
  <div>
      <span style="width: 100%;text-align: left;font-size: 15px;color:gray">
      看过的好友
      </span>
    <div class="frends">
      <img :src="item.headimgurl" style="padding: 2px" v-for="item of payedUser"/>

    </div>
  </div>
</template>
<style  scoped>
  .frends {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    max-height: 300px;
    overflow: scroll;
  }

  .frends img {
    border-radius: 10px;
    padding: 3px;
    width: 40px;
    height: 40px;
  }
</style>
<script>
  import {getArticlePayedList} from '../../api/api'
  export default {
    name:'payed-user-list',
    data(){
      return {
        payedUser:[]
      }
    },
    props:{
      id:{
        type:String,
        default:""
      }
    },
    mounted(){
      this.getData();
    },
    watch:{
      id(){
        this.getData();
      }
    },
    methods:{

      hasPayed() {
        let openid = sessionStorage.getItem('openid');
        for (let user of this.payedUser) {
          if (user.openid == openid) {

            return true;
          }
        }
        return false;
      },
      getData(){
          let vm=this;
        getArticlePayedList({articleId: this.id}).then((res)=>{
          vm.payedUser = res.data.data;
          let arr=[
            {headimgurl:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2147844513,2013743759&fm=26&gp=0.jpg'},
            {headimgurl:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=205690428,259685070&fm=26&gp=0.jpg'},
            {headimgurl:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=497603454,490081309&fm=26&gp=0.jpg'},
            {headimgurl:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1533051216,1679012713&fm=26&gp=0.jpg'},
            {headimgurl:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2081893311,2839872305&fm=26&gp=0.jpg'},
            {headimgurl:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3036196130,2864964233&fm=26&gp=0.jpg'},
            {headimgurl:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2187089698,2924989954&fm=26&gp=0.jpg'},
            {headimgurl:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2234893700,2268032607&fm=26&gp=0.jpg'},
            {headimgurl:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3992637533,2674248580&fm=26&gp=0.jpg'},
            {headimgurl:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3355071607,4263415574&fm=26&gp=0.jpg'},
            {headimgurl:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3172684637,96098580&fm=26&gp=0.jpg'},
            {headimgurl:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2790919025,231288215&fm=26&gp=0.jpg'},
            {headimgurl:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=343882356,2164782747&fm=26&gp=0.jpg'},
            {headimgurl:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2256493121,1748217204&fm=26&gp=0.jpg'},
            {headimgurl:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3080357926,178931772&fm=26&gp=0.jpg'},
            {headimgurl:'http://img1.imgtn.bdimg.com/it/u=3181539619,526584480&fm=26&gp=0.jpg'},
            {headimgurl:'http://img0.imgtn.bdimg.com/it/u=2194153919,1445233075&fm=26&gp=0.jpg'},
            {headimgurl:'http://img5.imgtn.bdimg.com/it/u=1264196771,642182352&fm=26&gp=0.jpg'},
            {headimgurl:'http://img1.imgtn.bdimg.com/it/u=2341444850,1997987997&fm=26&gp=0.jpg'},
            {headimgurl:'http://img3.imgtn.bdimg.com/it/u=3723884933,875287778&fm=26&gp=0.jpg'},
            {headimgurl:'http://img0.imgtn.bdimg.com/it/u=3905047297,1473316209&fm=26&gp=0.jpg'},
            {headimgurl:'http://img5.imgtn.bdimg.com/it/u=1320223949,1178434266&fm=26&gp=0.jpg'},
            {headimgurl:'http://img4.imgtn.bdimg.com/it/u=3628719501,2349108125&fm=26&gp=0.jpg'},

          ]
          vm.payedUser=vm.payedUser.concat(vm.shuffle(arr));

          vm.$emit('has-user-payed',vm.hasPayed());

        });
      }
    }
  }
</script>
